<template>
  <div class="app-container">
    <el-row v-if="queryParams.qsId && queryParams.bdId" :gutter="10" class="mb8 cd-pr8 top-right-btn small-line-height">
      <el-col :span="1.5">
        <el-button type="warning" plain size="mini" @click="handleExport"
          v-hasPermi="['system:dict:export']">导出</el-button>
      </el-col>
    </el-row>
    <el-table v-if="queryParams.qsId && queryParams.bdId" class="report-table" border stripe :data="dataList"
      :summary-method="getSummaries" show-summary>
      <el-table-column type="index" width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="beiazmc" header-align="center" label="备案证名称" min-width="120" show-overflow-tooltip />
      <el-table-column prop="name" header-align="center" label="站点名称" min-width="120" show-overflow-tooltip />
      <el-table-column prop="jianscj" header-align="center" label="建设场景" min-width="120" show-overflow-tooltip />
      <el-table-column prop="jiansrl" header-align="center" align="right" label="实际建设容量(千瓦)" min-width="135"
        show-overflow-tooltip />
      <el-table-column prop="danwzj" header-align="center" align="right" label="单瓦造价(元/瓦)" min-width="115"
        show-overflow-tooltip />
      <el-table-column prop="danzdzj" header-align="center" align="right" label="单站点总价(元)" min-width="140"
        show-overflow-tooltip />
      <el-table-column prop="yizfyfk" header-align="center" align="right" label="已支付预付款(元)" min-width="110"
        show-overflow-tooltip />
      <el-table-column prop="leijkcyfk" header-align="center" align="right" label="累计扣除预付款(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="benckkje" header-align="center" align="right" label="本次扣款(奖励基金)金额(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="leijkkje" header-align="center" align="right" label="累计扣款(奖励基金)金额(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="jiezscljfkje" header-align="center" align="right" label="截止上次累计付款金额(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="bencfkje" header-align="center" align="right" label="本次付款金额(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="jiezbcljfkje" header-align="center" align="right" label="截止本次累计付款金额(元)" min-width="120"
        show-overflow-tooltip />
      <el-table-column prop="fukbl" header-align="center" align="right" label="付款比例" min-width="120"
        show-overflow-tooltip />
      <el-table-column align="center" label="附件" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-paperclip" @click="onUploadFile(scope.row)">附件查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <file-upload-view ref="fileUploadViewRef" :moduleKey="'bsSettle'" :disabled="true" />
  </div>
</template>

<script>
import { queryBdQsTree } from "@/api/base/bsBd";
import { queryReportInfo, queryReportStatus, checkReport } from "@/api/cm/reportForm";
import { mapGetters } from "vuex";
import FileUploadView from '@/components/FileUpload/FileUploadView.vue';
import ExamineAndApprove from './examine-and-approve.vue';
import decimal from "@/utils/big-decimal";

export default {
  name: "ReportFormView",
  dicts: ['report_status'],
  components: {
    FileUploadView,
  },
  props: {
    bdId: {
      type: String,
      default: ''
    },
    qsId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      treeList: [],
      treeInfo: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 期数表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        qsId: undefined,
        bdId: undefined,
      },
      reportStatus: '',
      reportInfo: {}
    };
  },
  watch: {
    bdId: {
      deep: true,
      immediate: true,
      handler (val) {
        this.queryParams.bdId = val;
        this.queryParams.qsId = this.qsId;
        this.getTableList();
      }
    }
  },
  created () {
  },
  methods: {
    getTableList () {
      queryReportInfo(this.queryParams).then(res => {
        this.dataList = res.data;
        //实际建设容量瓦转千瓦；
        // this.dataList.forEach(e => e.jiansrl = e.jiansrl ? decimal.divide(e.jiansrl, 1000, 4) : "-");
      });
    },
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计';
          return;
        }
        if (index >= 6 && index <= 13) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return decimal.add(prev, curr);
              } else {
                return decimal.round(prev);
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        }
      });

      this.$emit('getSummaries', sums)
      return sums;
    },
    // 状态字典翻译
    reportStatusFormat () {
      return this.selectDictLabel(this.dict.type.report_status, this.reportStatus);
    },
    // 附件
    onUploadFile (row) {
      const info = {
        businessId: row.id,
        subBusinessId: this.queryParams.qsId,
      };
      this.$refs.fileUploadViewRef.init(info);
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('cm/bdQsCount/exportReport', {
        ...this.queryParams
      }, `报表_${new Date().getTime()}.xlsx`);
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .report-table {
  .el-table__header-wrapper th {
    height: 22px !important;
  }
}
</style>
